<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Dialog Button Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Dialog Button</h1>
        </gs-jumbo>
        
        <gs-container min-width="sml;med;lrg">
            <h3 class="doc-header">Tag:</h3>
            <pre>&lt;gs-dialog-button template="..."&gt;&lt;/gs-dialog-button&gt;</pre>
            
            <h3 class="doc-header">Description:</h3>
            <p>This element is used to open a dialog at the click of a button, it accepts all of the same attributes of the normal <code>gs-button</code> except for <code>[target]</code>.</p>
            
            
            
            
            
            <h1 class="doc-header">Examples:</h1>
            
            <div class="doc-example-description">
                <span class="h3">Inner Template Example:</span>
                <p>This is an example of a <code>&lt;gs-dialog-button&gt;</code> that creates a dialog using an inner template. The template element must be an immediate child of the button for this to work. This is useful for a quick and simple dialog.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <gs-dialog-button>
                        <template>
                            <h5>Example Dialog</h5>
                            <gs-button dialogclose>Done</gs-button>
                        </template>
                        Example Dialog
                    </gs-dialog-button>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[template=""]</code>:</span>
                <p>In this example we have a <code>&lt;gs-dialog-button&gt;</code> that opens a dialog by linking to an external <code>&lt;template&gt;</code> element. This is done by putting the <code>&lt;template&gt;</code>'s "<code>id</code>" in the <code>&lt;gs-dialog-button&gt;</code>'s "<code>template</code>" attribute. You would use this if you want to keep all of your templates together or if you want/have multiple elements/javascript functions using the template.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template id="dialog-example">
                        <h5>Example Dialog</h5>
                        <gs-button dialogclose>Done</gs-button>
                    </template>
                    
                    <gs-dialog-button template="dialog-example">
                        Example Dialog
                    </gs-dialog-button>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Event attributes Example:</span>
                <p>
                    There are four event attributes that you can run JavaScript in for this element.<br />
                    <ol>
                        <li>The "<code>before-open</code>" attribute runs before the dialog is added to the DOM. A variable can be used in this attribute is: "this", which is the button element that was clicked.</li>
                        <li>The "<code>after-open</code>" attribute runs after the dialog has been added to the DOM. A variable can be used in this attribute is: "this", which is the dialog element that was created.</li>
                        <li>The "<code>before-close</code>" attribute runs before the dialog is removed from the DOM. Variables in this attribute are "this" (which is the dialog element that is going to be closed) and "strAnswer" (which is the answer of the dialog).</li>
                        <li>The "<code>after-close</code>" attribute runs after the dialog has been removed from the DOM. Variables in this attribute are "this" (which is the button element that was originally clicked) and "strAnswer" (which is the answer of the dialog).</li>
                    </ol>
                </p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template id="dialog-example">
                        <h5>Example Dialog</h5>
                        <gs-button dialogclose>Done</gs-button>
                    </template>
                    
                    <gs-dialog-button template="dialog-example"
                            before-open="alert('before-open.');"
                            after-open="alert('after-open.');"
                            before-close="alert('before-close. Answer: ' + strAnswer);"
                            after-close="alert('after-close. Answer: ' + strAnswer);">
                        Example Dialog
                    </gs-dialog-button>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[target=""]</code>:</span>
                <p>You can open a dialog and attach it to a target element. This is done by putting a selector in the "<code>target</code>" attribute. This could be used for lists or tooltips.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template id="dialog-example">
                        <h5>Example Dialog</h5>
                        <gs-button dialogclose>Done</gs-button>
                    </template>
                    
                    <gs-dialog-button template="dialog-example"
                                      target="#span">
                        Open Example Dialog at the green element
                    </gs-dialog-button>
                    
                    <gs-dialog-button template="dialog-example"
                                      target>
                        Open Example Dialog at the this button
                    </gs-dialog-button>
                    
                    <br /><br /><br />
                    
                    <center>
                        <span id="span" style="background: #0D0;">Target</span>
                    </center>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[direction=""]</code>:</span>
                <p>When you open a dialog and attach it to a target element you can specify a side to attach to. If the dialog doesn't have the room on the chosen side, then it wil try different sides. This is done by putting "left", "right", "up" or "down" in the "<code>direction</code>" attribute.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template id="dialog-example" data-max-width="4.2em">
                        <h5>Example</h5>
                        <gs-button dialogclose>Done</gs-button>
                    </template>
                    
                    <gs-dialog-button template="dialog-example"
                                      target="#span"
                                      direction="left">
                        Open To The To The Left (left)
                    </gs-dialog-button>
                    
                    <gs-dialog-button template="dialog-example"
                                      target="#span"
                                      direction="right">
                        Open To The To The Right (right)
                    </gs-dialog-button>
                    
                    <gs-dialog-button template="dialog-example"
                                      target="#span"
                                      direction="up">
                        Open To The To The Top (up)
                    </gs-dialog-button>
                    
                    <gs-dialog-button template="dialog-example"
                                      target="#span"
                                      direction="down">
                        Open To The On The Bottom (down)
                    </gs-dialog-button>
                    
                    <br /><br /><br />
                    
                    <center>
                        <span id="span" style="background: #0D0;">Target</span>
                    </center>
                </template>
            </gs-doc-example>
                
            <div class="doc-example-description" id="qsattribute">
                <span class="h3">Attribute <code>[qs=""]</code>:</span><br />
                <p>The name <code>[qs]</code> stands for "querystring". The querystring is the part in the URL after the "?". The <code>[qs]</code> attribute has two formats, each with their own use.</p>
                
                <ul>
                    <li>qs="<i>key1</i>=<i>attribute1</i>". This format allows you to fill any attribute with any key from the querystring. To use multiple keys from the querystring you can put a comma-separated list of these expressions (for example: qs="<i>key1</i>=<i>attribute1</i>,<i>key2</i>=<i>attribute2</i>"). If you need an attribute to be added when a querystring key is not present, replace the "=" with "!=" (for example: qs="<i>key1</i>!=<i>attribute1</i>", attribute1 will only be added if key1 is not in the querystring). As a shorthand, if the key in the querystring is the same name as the attribute you want to fill, you can omit the attribute name in the expression (for example: qs="<i>key1</i>="). If an expression doesn't find it's key in the querystring: it reverts the attribute that it fills to it's original value.</li>
                    <li>qs="<i>key</i>". This format will update the <code>[value]</code> attribute with the querystring whenever the querystring changes.</li>
                </ul>
            </div>
            <gs-doc-example query-string="test1=test1&test2=test2">
                <template for="html" height="35">
                    <gs-dialog-button qs="test1">Test 1</gs-dialog-button>
                    <gs-dialog-button qs="test2=value">Test 2</gs-dialog-button>
                    <gs-dialog-button qs="test3=hidden">Test 3</gs-dialog-button>
                    <gs-dialog-button qs="test4!=hidden">Test 4</gs-dialog-button>
                    <br />
                    <br />
                    <gs-grid widths="1,1">
                        <gs-block>
                            <gs-button onclick="GS.pushQueryString('test1=test1');">Add "test1"</gs-button>
                        </gs-block>
                        <gs-block>
                            <gs-button onclick="GS.removeFromQueryString('test1');">Remove "test1"</gs-button>
                        </gs-block>
                        <gs-block>
                            <gs-button onclick="GS.pushQueryString('test2=test2');">Add "test2"</gs-button>
                        </gs-block>
                        <gs-block>
                            <gs-button onclick="GS.removeFromQueryString('test2');">Remove "test2"</gs-button>
                        </gs-block>
                        <gs-block>
                            <gs-button onclick="GS.pushQueryString('test3=test3');">Add "test3"</gs-button>
                        </gs-block>
                        <gs-block>
                            <gs-button onclick="GS.removeFromQueryString('test3');">Remove "test3"</gs-button>
                        </gs-block>
                        <gs-block>
                            <gs-button onclick="GS.pushQueryString('test4=test4');">Add "test4"</gs-button>
                        </gs-block>
                        <gs-block>
                            <gs-button onclick="GS.removeFromQueryString('test4');">Remove "test4"</gs-button>
                        </gs-block>
                    </gs-grid>
                </template>
            </gs-doc-example>
        </gs-container>
        <br />
        <br />
        <br />
        <br />
    </body>
</html>